<template>
    <div class="Login">
        <div class="logo">

        </div>
        <form>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title f16">手机号:</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input borders" pattern="[0-9]*" placeholder="请输入手机号" type="number" v-model="account">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label title f16">密码:</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input borders" pattern="[0-9]*" placeholder="请输入密码" type="password" v-model="password">
                </div>
            </div>
        </form>
        <button  class="weui-btn weui-btn_primary site-bgcolor" id="rec_btn" @click="Login">登录</button>
        <router-link :to="{ name: 'Register'}"  class="cz" >注册</router-link><router-link :to="{ name: 'ForgetPassword'}" class="cz">忘记密码</router-link>
    </div>
</template>

<script>
    import axios from 'axios';
    import Qs from 'qs';
    export default {
        name: "Login",
        data(){
          return{
              account:'',
              password:'',
          }
        },
        methods:{
            Login(){
                let data={
                    account:this.account,
                    password:this.password,
                }
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    method: 'post',
                    url: process.env.API_ROOT+'/api/User/Login',
                    data: Qs.stringify(data)
                })
                    .then(res=>{
                        if(res.data.code==1) {
                            let token = res.data.data.userinfo.token
                            // console.log(res);
                            // let token='61e9acde-ab60-4b31-8ff6-08de599ccd58';
                            localStorage.setItem('token', token);
                            this.$router.push({path: '/'})
                        }else{
                            this.$alert(res.data.msg)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    }
    document.title='登录'
</script>

<style scoped>
    @import "../assets/css/common.css";
  .Login{
      height: 650px;
      background: url("../assets/images/login-bg.png");
      background-repeat:no-repeat;
      background-size:100% 100%;
      padding-top: 50px;
  }
    .logo{
        width: 80px;
        height: 80px;
        margin: 0 auto;
        background: url("../assets/images/logo.png");
        background-repeat:no-repeat;
        background-size:100% 100%;
        margin-bottom: 50px;
    }
    .title{
        color:#edeeee ;
        margin-left: -20px;
    }
    .cz{
        color: #edeeee;
        float: left;
        padding: 20px 18%;
    }
    .borders{
        border: 1px solid #edeeee;
        height: 38px;
        line-height: 38px;
        border-radius: 20px;
        text-align: center;
        margin-left:-30px;
    }
  #rec_btn{
      width: 80%;
      border-radius: 30px;
      padding:10px;
      font-weight: normal;
      margin-top: 20px;
  }
  input::-webkit-input-placeholder{
      color:#edeeee;
  }
  input{
      color:#edeeee ;
  }
</style>
